<template>
    <div>
        <el-table
            :data="roleList"
            border
            stripe
            style="width: 100%; margin: 10px 0px">
            <el-table-column label="序号" type="index" width="100px" align="center"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button @click="editPermission(scope.row)" size="small" 
                    type="success">修改权限</el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <el-dialog
            title="权限修改"
            :visible.sync="permissionFormDialogVisible"
            :close-on-click-modal="false">
            <el-tree
                ref="ptree"
                :data="permissionList"
                default-expand-all
                show-checkbox
                node-key="id"
                highlight-current
                :props="defaultProps">
            </el-tree>
            <div slot="footer">
                <el-button @click="userFormDialogVisible = false">取 消</el-button>
                
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getAllPermission} from '@/api/permission'
import {getAllRole,updatePermission} from '@/api/role'
export default {
    data() {
        return {
            roleList:[],
            roleForm:{},
            permissionList:[],
            permissionFormDialogVisible:false,
            permissinFrom:'',
            defaultChecked:[],
            defaultProps:{
                label:'name',
                children:'children',
            },
            roleid:'',
        };
    },

    mounted() {
        this.getAllPermission()
        this.getAllRole()
    },

    methods: {
        editPermission(item){
            this.permissionFormDialogVisible = true
            this.$nextTick(() => {
                this.$refs.ptree.setCheckedKeys(item.permissionId,false);
            })

            this.permissionList[4].disabled = false
            this.permissionList[4].children[0].disabled = false
            if(item.id == 1){
                this.permissionList[4].disabled = true
                this.permissionList[4].children[0].disabled = true
            }
            this.roleid = item.id
        },
        submit(){
            let permissonid = this.$refs.ptree.getCheckedKeys()
            updatePermission(this.roleid,permissonid).then(resp=>{
                if(resp.code == 200){
                    this.$message.success(resp.message)
                    this.getAllRole()
                }else{
                    this.$message.success(resp.message)
                }
            })
            this.permissionFormDialogVisible = false
        },
        async getAllRole(){
            await getAllRole().then(resp=>{
                if(resp.code==200){
                    this.roleList = resp.data
                }else{
                    console.log("查询失败")
                }
            })
        },
        async getAllPermission(){
            await getAllPermission().then(resp=>{
                if(resp.code==200){
                    this.permissionList = resp.data
                }else{
                    console.log("权限查询失败")
                }
            })
        }
    },
};
</script>

<style scoped>

</style>